$(function() {
  $(".navbar-expand-toggle").click(function() {
    $(".app-container").toggleClass("expanded");
    return $(".navbar-expand-toggle").toggleClass("fa-rotate-90");
  });
  return $(".navbar-right-expand-toggle").click(function() {
    $(".navbar-right").toggleClass("expanded");
    return $(".navbar-right-expand-toggle").toggleClass("fa-rotate-90");
  });

});
$(function() {
  return $('.toggle-checkbox').bootstrapSwitch({
    size: "small"
  });
});
$(function() {
  return $('.match-height').matchHeight();
});
$(function() {
  return $('.datatable').DataTable({
    "dom": '<"top"fl<"clear">>rt<"bottom"ip<"clear">>',
    language:{
      url: '../lib/js/cn_lang.json'
    }
  })
   
});
Vue.component('side-menu',{
  /*    template:`<div class="side-menu sidebar-inverse">
                  <nav class="navbar navbar-default" role="navigation">
                      <div class="side-menu-container">
                          <div class="navbar-header">
                              <a class="navbar-brand" href="">
                                  <div class="icon fa fa-train"></div>
                                  <div class="title">北京站</div>
                              </a>
                              <button type="button" class="navbar-expand-toggle pull-right visible-xs">
                                  <i class="fa fa-times icon"></i>
                              </button>
                          </div>
                          <ul class="nav navbar-nav">
                              <li v-for="(info,index) in nav1" :key="info.id" :rel="info.type" @click="showNav2(info.type)" :class="{active:info.type == accNav1}">
                                  <a href="javascript:void(0)">
                                      <span class="icon fa" :class="info.fa"></span><span class="title">{{info.name}}</span>
                                  </a>
                              </li>
                          </ul>
                          
                      </div>
                  </nav> 
                  <div class="nav-bar2">
                      <div class="navbar-title">
                          <p class="title">组织管理</p>
                      </div>
                      <div class="panel-collapse collapse in" aria-expanded="true">
                          <ul class="nav navbar-nav">
                              <li v-for="(info,index) in nav2" v-if="info.type == accNav1">
                                  <a :href="info.url">{{info.name}}</a>
                              </li>
                          </ul>
                      </div>
                  </div>
              </div>`,
  */
    template:'<div class="side-menu sidebar-inverse">\
                <nav class="navbar navbar-default" role="navigation">\
                    <div class="side-menu-container">\
                        <div class="navbar-header">\
                            <a class="navbar-brand" href="">\
                                <div class="icon fa fa-train"></div>\
                                <div class="title">北京站</div>\
                            </a>\
                            <button type="button" class="navbar-expand-toggle pull-right visible-xs">\
                                <i class="fa fa-times icon"></i>\
                            </button>\
                        </div>\
                        <ul class="nav navbar-nav">\
                            <li v-for="(info,index) in nav1" v-if="info.show == true" :key="info.id" :rel="info.type" @click="showNav2(info.type)" :class="{active:info.type == accNav1}">\
                                <a href="javascript:void(0)">\
                                    <span class="icon fa" :class="info.fa"></span><span class="title">{{info.name}}</span>\
                                </a>\
                            </li>\
                        </ul>\
                    </div>\
                </nav> \
                <div class="nav-bar2">\
                    <div class="navbar-title">\
                        <p class="title">{{nav1Name}}</p>\
                    </div>\
                    <div class="panel-collapse collapse in" aria-expanded="true">\
                        <ul class="nav navbar-nav">\
                            <li v-for="(info,index) in nav2" v-if="info.type == accNav1 && info.show == true">\
                                <a :href="info.url">{{info.name}}</a>\
                            </li>\
                        </ul>\
                    </div>\
                </div>\
            </div>',
    data:function(){
        return navData
    },
    methods:{
        showNav2:function(type){
            this.accNav1=type
        }
    }
})
Vue.component('top-nav',{
  template:'<ul class="nav navbar-nav navbar-left no-border">\
              <li v-for="(info,index) in nav3" v-if="info.type == accNav2 && info.show == true" :key="info.id" :class="{active:accNav3 == info.id}"><a :href="info.url" role="button">{{info.name}}</a></li>\
            </ul>',
  data:function(){
    return navData
  }
})
Vue.component('right-info',{
  
  template:`<ul class="nav navbar-nav navbar-right" style="display:none">
    <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
        <i class="fa fa-times icon"></i>
    </button>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-comments-o"></i></a>
        <ul class="dropdown-menu animated fadeInDown">
            <li class="title">
                Notification <span class="badge pull-right">0</span>
            </li>
            <li class="message">
                No new notification
            </li>
        </ul>
    </li>
    <li class="dropdown danger">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-star-half-o"></i> 4</a>
        <ul class="dropdown-menu danger  animated fadeInDown">
            <li class="title">
                Notification <span class="badge pull-right">4</span>
            </li>
            <li>
                <ul class="list-group notifications">
                    <a href="#">
                        <li class="list-group-item">
                            <span class="badge">1</span> <i class="fa fa-exclamation-circle icon"></i> new registration
                        </li>
                    </a>
                    <a href="#">
                        <li class="list-group-item">
                            <span class="badge success">1</span> <i class="fa fa-check icon"></i> new orders
                        </li>
                    </a>
                    <a href="#">
                        <li class="list-group-item">
                            <span class="badge danger">2</span> <i class="fa fa-comments icon"></i> customers messages
                        </li>
                    </a>
                    <a href="#">
                        <li class="list-group-item message">
                            view all
                        </li>
                    </a>
                </ul>
            </li>
        </ul>
    </li>
    <li class="dropdown profile">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Emily Hart <span class="caret"></span></a>
        <ul class="dropdown-menu animated fadeInDown">
            <li class="profile-img">
                <img src="../lib/img/profile/picjumbo.com_HNCK4153_resize.jpg" class="profile-img">
            </li>
            <li>
                <div class="profile-info">
                    <h4 class="username">Emily Hart</h4>
                    <p>emily_hart@email.com</p>
                    <div class="btn-group margin-bottom-2x" role="group">
                        <button type="button" class="btn btn-default"><i class="fa fa-user"></i> Profile</button>
                        <button type="button" class="btn btn-default"><i class="fa fa-sign-out"></i> Logout</button>
                    </div>
                </div>
            </li>
        </ul>
    </li>
  </ul>`,
  data:function(){
    return {}
  }
})